import React, { useState, useContext } from "react";
import { View, StyleSheet, Dimensions, Text, ScrollView, TouchableOpacity, Image } from "react-native";
import { Button, Icon } from "@rneui/themed";
import CommonContext from '@/utils/createContext'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const CollectionList = () => {

    const [openIndex, setOpenIndex] = useState(undefined);
    const { safeCollectList, handlePressAdd } = useContext(CommonContext)

    const handlePressOpen = (index) => {
        if (openIndex == index) {
            setOpenIndex(undefined)
        } else {
            setOpenIndex(index)
        }
    }

    return (
        <ScrollView style={styles.container}>
            {safeCollectList && safeCollectList.length > 0 ? safeCollectList.map((item, index) => {
                const isOpen = index == openIndex ? true : false;
                return (
                    <View key={index}>
                        <TouchableOpacity style={styles.itemContent} onPress={() => { handlePressOpen(index) }}>
                            <Icon style={{ marginLeft: 15 * ratio }} type="antdesign" name={openIndex == index ? 'down' : 'right'} color='#2C2C2C' size={10} />
                            <View style={{
                                width: 20 * ratio, height: 20 * ratio, justifyContent: 'center',
                                alignItems: 'center', marginLeft: 5 * ratio, backgroundColor: '#F5F6FA'
                            }}>
                                <Text style={{ ...styles.title2, color: '#BCBCBC' }}>{item.tokenName ? item.tokenName.slice(0, 1) : ''}</Text>
                            </View>
                            <Text style={{ ...styles.title2, color: '#2C2C2C', marginLeft: 7 * ratio }}>{item.tokenName}</Text>
                        </TouchableOpacity>
                        {isOpen &&
                            <View style={{ width: 60 * ratio, height: 60 * ratio, justifyContent: 'center', alignItems: 'center', marginLeft: 33 * ratio }}>
                                <Image source={{ uri: item.logoUri }} style={styles.img} />
                                <Text style={{ ...styles.title3, marginTop: 3 * ratio }}>{item.name}</Text>
                            </View>}
                    </View>
                )
            }) :
                <View style={styles.noDataContent}>
                    <Text style={{ ...styles.title2, color: '#80858B', marginBottom: 9 * ratio }}>
                        You don't have any collections!
                    </Text>
                    <Button type="clear" onPress={handlePressAdd}>
                        <Text style={{ ...styles.title1, marginBottom: 35 * ratio }}>Add collection</Text>
                    </Button>
                </View>}
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    itemContent: {
        flexDirection: 'row',
        width: width,
        height: 48 * ratio,
        alignItems: 'center'
    },
    noDataContent: {
        width: width,
        height: 400 * ratio,
        alignItems: 'center',
        justifyContent: 'flex-end'
    },
    img: {
        width: 43 * ratio,
        height: 43 * ratio
    },
    title1: {
        fontSize: 13,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#0A6EEB',
        lineHeight: 18
    },
    title2: {
        fontSize: 12,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        lineHeight: 17
    },
    title3: {
        fontSize: 7,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontWeight: '400',
        color: '#2C2C2C',
        lineHeight: 11
    },

})
export default CollectionList